<template>
  <div class="detailDialog" v-show="isShow">
    <div class="fallowDetail">
      <img
          :src="fallowInfo.background"
          alt=""
          class="bgImg"
          :style="{
            transform: `scale(${fallowInfo.scale || 1}) translateX(${fallowInfo.translate || '0%'})`,
            float: fallowInfo.bg_position || 'right'
          }"
      />
      <div
          class="fallowDescription"
          :style="{
            left: fallowInfo.bg_position === 'right' ? '20px' : '',
            right: fallowInfo.bg_position === 'left' ? '20px' : ''
          }"
          v-if="isShow"
      >
        {{fallowInfo.description}}
      </div>
      <img src="/assets/fallow/close.png" alt="" class="closeBtn" @click="hideDialog">
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue"

// 详细信息
const fallowInfo = ref({})
// 是否显示弹窗
const isShow = ref(false)

// 显示弹窗
function showDialog(value) {
  fallowInfo.value = value
  isShow.value = true
}

// 关闭弹窗
function hideDialog() {
  isShow.value = false
}

defineExpose({
  showDialog
})
</script>

<style scoped>
.detailDialog{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.fallowDetail{
  width: 85vw;
  max-width: 1200px;
  height: 80vh;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  box-shadow: 5px 5px 10px #444444;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fallowDetail .bgImg{
  height: 100%;
}
.fallowDetail .fallowDescription{
  width: 50%;
  height: calc(100% - 70px);
  padding: 12px;
  position: absolute;
  top: 35px;
  background-color: rgba(0,0,0,.4);
  color: #ffffff;
  overflow: scroll;
  border-radius: inherit;
  line-break: anywhere;
  line-height: 1.5;
}
.fallowDetail .closeBtn{
  width: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
@media (max-width: 800px){
  .fallowDetail .bgImg{
    display: none;
  }
  .fallowDetail .fallowDescription{
    width: calc(100% - 40px);
  }
}
</style>